<template>
	<view class="question-answer">
		<view class="block" v-for="item in dataObj.list" :key="item.questionId">
			<view class="title">{{item['sort']}}. {{item.questionContent}}</view>
			<view class="option" v-for="oItem in item.optionInfoList" :key="oItem.optionLetter">{{oItem.optionLetter}}  {{oItem.optionContent}}</view>
			<view class="footer">
				<view class="answer">正确答案：{{item.trueAnswer}}</view>
				<view class="mine" :class="item.trueAnswer === item.studentAnswer ? 'right' : 'wrong'">我的答案：{{item.studentAnswer || '无提交'}}</view>
			</view>
			<view class="remark">
				<text class="r-title">答案解析：</text>
				{{item.remark || '无'}}
			</view>
		</view>
	</view>
</template>

<script>
	import { requestErrorTip, loginExam } from '@/common/tools.js';
	
	export default {
		data() {
			return {
				pageObj: {
					examId: '',
					title: ''
				},
				dataObj: {
					list: []
				}
			}
		},
		onLoad(event) {
			const title = event['title']; // 获取科目名称
			this.pageObj['examId'] = event['examId']; // 获取考试id
			this.pageObj['title'] = event['title']; // 获取考试id
			uni.setNavigationBarTitle({
			　　title: title
			});
			this.getData();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getData();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 获取数据
			getData() {
				this.$Requset({
					url: this.$Api['exam']['getExamQuestionInfo'],
					data: {
						token_exam: uni.getStorageSync('examToken'),
						studentId: uni.getStorageSync('studentId'),
						examId: this.pageObj['examId']
					},
					success: (res) => {
						const { data, status, message } = res;
						if (status !== 300) {
							if (status === 103) {
								const userInfo = uni.getStorageSync('userInfo');
								const mobile = userInfo['mobile'];
								loginExam(mobile, () => {
									this.getData();
								});
								return;
							}
							requestErrorTip('toast', message);
							return;
						}
						this.dataObj['list'] = data['questionInfoList'];
					},
					fail: (err) => {
						console.log(err);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	.question-answer{
		padding-top: 18rpx;
		.title{
			line-height: 48rpx;
			font-size: 28rpx;
			color: #1A1A1A;
			margin-bottom: 14rpx;
		}
		.option{
			line-height: 40rpx;
			font-size: 26rpx;
			color: #7F7F7F;
			margin-bottom: 14rpx;
		}
		.footer{
			height: 48rpx;
			line-height: 48rpx;
			font-size: 26rpx;
			color: #1BB682;
			margin-bottom: 14rpx;
			.answer{
				float: left;
			}
			.mine{
				float: right;
				position: relative;
				padding: 0 24rpx 0 60rpx;
				border-radius: 8rpx;
				&::before{
					content: '';
					position: absolute;
					top: 8rpx;
					left: 16rpx;
					width: 32rpx;
					height: 32rpx;
					background-position: center center;
					background-repeat: no-repeat;
					background-size: 100% 100%;
				}
			}
			.right{
				background-color: rgba($color: #1BB682, $alpha: 0.1);
				&::before{
					background-image: url(../../static/images/common/hook.png);
				}
			}
			.wrong{
				color: #F21B3F;
				background-color: rgba($color: #F21B3F, $alpha: 0.1);
				&::before{
					background-image: url(../../static/images/common/fork.png);
				}
			}
		}
		.remark{
			line-height: 40rpx;
			font-size: 26rpx;
			color: #7F7F7F;
			.r-title{
				color: $color-common;
				font-weight: bold;
			}
		}
	}
</style>
